*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}

body{
    /* 100%的窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#ffecd2,#fcb69f);
}

.container{
    /* 定义3D元素距视图的距离 */
    perspective: 320px;
}

.btn{
    display: block;
    margin: 40px 0;
    width: 240px;
    height: 80px;
    /* 去掉边框 */
    border: none;
    background-color: #fda085;
    color: #fff;
    font-size: 18px;
    border-radius: 18px;
    outline: none;
    /* 鼠标放上变小手 */
    cursor: pointer;
    /* 动画过渡 */
    transition: 0.3s;
}
.btn:nth-child(1):hover{
    /* 沿着X轴旋转15度 */
    transform: rotateX(15deg);
    /* 阴影 */
    box-shadow: 0 15px 15px rgba(255, 95, 65, 0.56);
}
.btn:nth-child(2):hover{
    /* 沿着X轴旋转15度 */
    transform: rotateX(-15deg);
    /* 阴影 */
    box-shadow: 0 -15px 15px rgba(255, 95, 65, 0.56);
}

.btn:nth-child(3):hover{
    /* 沿着Y轴旋转15度 */
    transform: rotateY(15deg);
    /* 阴影 */
    box-shadow: -15px 0 15px rgba(255, 95, 65, 0.56);
}

.btn:nth-child(4):hover{
    /* 沿着Y轴旋转15度 */
    transform: rotateY(-15deg);
    /* 阴影 */
    box-shadow: 15px 0 15px rgba(255, 95, 65, 0.56);
}